<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-ua-compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title></title>
		<style>
			body,ul ,h4,p{margin:0;padding:0;}
			body{font:12px/1.5em '微软雅黑';}
			ul{list-style:none;}
			.wrap{
				margin:50px auto;
				width:400px;
				height:650px;
				/* background-color: pink; */
			}
			/* .wrap ul{
				height:150px;
				background-color: green;
			} */
			.wrap ul li{
				/* height:110px; */
				border-bottom:1px solid #ccc;
				padding:20px 0;
			/* 	background-color: red; */
			}
			.wrap ul li img{
				width:100px;
				height:100px;
				border:4px solid #ccc;
				border-radius:50%;
				vertical-align:middle;
			}
			.wrap ul li .content{
				margin:0 0 0 10px;
				display:inline-block;
				width:230px;
				/* height:110px; */
		/* 		background-color: blue; */
				vertical-align:middle;
			}
			.wrap ul li .content h4{
				padding:20px 0;
			}
			.wrap ul li img:hover{
				border-color:yellow;
			}
			.wrap ul li .content h4:hover{
				color:gray;
			}
			.wrap ul li .content p:hover{
				color:gray;
			}
		</style>
	</head>
	<body>
		<div class='wrap'>
			<ul>
				<li>
					<img width='380' height='370' src="1.jpg" alt="美女一">
					<div class="content">
						<h4>AmyRoiland</h4>
						<p>
							「Amy Roiland」美国洛杉矶 风格复古又新潮，总能在清新、性感和复古中轻松切换。
						</p>
					</div>
				</li>
				<li>
					<img width='380' height='370' src="2.jpg" alt="美女一">
					<div class="content">
						<h4>AmyRoiland</h4>
						<p>
							「Tonya S.」美国
						</p>
					</div>
				</li>
				<li>
					<img width='380' height='370' src="3.jpg" alt="美女一">
					<div class="content">
						<h4>EvaVelt</h4>
						<p>
							「EvaVelt」 荷兰时尚博主
						</p>
					</div>
				</li>
				<li>
					<img width='380' height='370' src="4.jpg" alt="美女一">
					<div class="content">
						<h4>Nicola Nilsen</h4>
						<p>
							「Nicola Nilsen」挪威 风格清新甜美
						</p>
					</div>
				</li>
			</ul>
		</div>
	</body>
</html>
